<template>
	<div>
		<el-row>
				<el-col :span="8">
					<div class="setheight_scroller">
						<el-tree class="filter-tree " 
							:data="PowerTreeData" 
							:props="defaultPropsPowerTree" 
							node-key="id" 
							:expand-on-click-node="false" 
							@current-change="handleClickPowerTree" 
							default-expand-all 
							ref="tree">
						</el-tree>
					</div>
				</el-col>
				<el-col :span='16'>
					<el-card class="box-card">
						<div class="setheight_scroller">
							<el-row>
								<div style="font-weight:bold;font-size: 20px;"> </div>
							</el-row>
							<el-table :data="rolePowerData" showOverflowTooltip style="width: 100%;"  height="500" stripe border tooltip-effect="dark" ref="multipleTable" @selection-change="handleSelectionChange" @row-click="rowClick">
								<el-table-column type="selection" width="50"> </el-table-column>
								<el-table-column prop="power_key" label="权限Key" show-overflow-tooltip></el-table-column>
								<el-table-column prop="power_name" label="权限名称" show-overflow-tooltip></el-table-column>
							</el-table>
						</div>
					</el-card>
					<div v-if="showButton">
						<el-button @click="closeRole">取 消</el-button>
	    				<el-button type="primary" @click="addPower">确 定</el-button>
	    			</div>
				</el-col>
		</el-row>
	</div>
</template>

<script>
	import { query, apiparas, execute } from '../../../api/api';
	export default {
		props: ['roleKey','roleStatus','delStatus','showButton'],
		data() {
			return {
				PowerTreeData: [],
				rolePowerData:[],
				multipleTable:[],
				delstatus :false,
				defaultPropsPowerTree: {
					id: 'id',children: 'subs',label: 'tree_name'
				},
			}
		},
		methods: {
			handleClickPowerTree(row) {
				this.powerid = row.id;
				this.rolePowerData = [];
				this.getRolePowerData();
			},
			showPowerTreeData() {
				//显示数据
				let jsonparas = [];
				let paras = apiparas.getParas_rtype('default', 'basic|get_power_tree', 3, jsonparas);
				query(paras).then(response => {
					var json_data = response.result;
					this.PowerTreeData = json_data;
				});
			},
			handleSelectionChange(val) {
				this.multipleTable = val;
	        	this.$emit("multipleTable",this.multipleTable);
			},
			rowClick(row, event, column) {
				this.toggleSelection(row);
			},
			toggleSelection(rows) {
				if(this.multipleTable.length > 0) {
					this.$refs.multipleTable.clearSelection();
				}
				this.$refs.multipleTable.toggleRowSelection(rows);
			},
			getRolePowerData: function() {
				var jsonparas = [];
				//增加查询条件
				apiparas.pushPara(jsonparas, 'role_key', this.roleKey);
				apiparas.pushPara(jsonparas, 'power_tree_key', this.powerid);
				apiparas.pushPara(jsonparas, 'type', this.roleStatus);
				//查询汇总
				let _paras = apiparas.getParas('default', 'basic|get_role_power', jsonparas);
				query(_paras).then(response => {
					this.rolePowerData = response.result;

				});
			},
			addPower: function() {
				let str = '';
				for(let i = 0; i < this.multipleTable.length; i++) {
					str += this.multipleTable[i]['power_key'] + ",";
				}
				str = str.substring(0, str.length - 1);
				let jsonparas = [];
				apiparas.pushPara(jsonparas, 'role_key', this.roleKey);
				apiparas.pushPara(jsonparas, 'power', str);
				let _paras = apiparas.getParas('default', 'basic|insert_role_power', jsonparas);
				console.log(_paras,'_paras');
				execute(_paras).then(response => {
					this.addPowerVisible = false;
					this.checkedPower = [];
					if(response.errid == 0) {
						this.$notify({
							title: '添加',message: '成功添加',type: 'success'
						});
						this.getRolePowerData();
					} else {
						this.$notify.error({
							title: '错误',message: response.errmsg
						});
					}
				});
			},
			closeRole:function(){
				this.rolePowerData = [],
				this.addPowerVisible = false;
	        	this.$emit("addPowerVisible",this.addPowerVisible);
			}
		},
		created: function() {
			this.showPowerTreeData();
		},
		watch: {
      		roleKey(val){
      			this.showPowerTreeData();
				this.getRolePowerData();
      		},
      		roleStatus(val){
      			this.showPowerTreeData();
				this.getRolePowerData();
      		},
      		delStatus(val){
      			this.showPowerTreeData();
      			this.delstatus = false;
	        	this.$emit("delStatus",this.delstatus);
				this.getRolePowerData();
      		}
		}
	}
</script>

<style>
</style>